<!DOCTYPE HTML PUBLIC>
<html>
<head>
  <!-- Removed the title for the PageWithoutTitle audit to catch. -->
  <script type="text/javascript" src="../gen/axs_testing.js"></script>
</head>
<body style="margin-bottom: 0px;" aria-hidden="true" chromevoxignoreariahidden="true" role="application" chromevoxoriginalrole="null">
  <div>
    A form element without a label: <input type="text"></input>
  </div>
  <div>
    <label>A form element <input type="text" aria-label="Screenreader-only label"></input> with two types of labels</label>
  </div>
  <div>
    <span id="aria-label-incorrect">An incorrectly identified aria-labelledby</span>
    <input type="text" aria-labelledby="aria-label"></input>
  </div>
  <div>
    <span id="aria-label-correct" style="display: none">A correctly identified aria-labelledby</span>
    <input type="text" aria-labelledby="aria-label-correct"></input>
  </div>
  <div>
    <span id="aria-label-1">Multiple</span> <span id="aria-label-2">aria-labelledby values</span>
    <input type="text" aria-labelledby="aria-label-1 badidref aria-label-2"></input>
  </div>
  <div>
    <label for="forInput">A form element with <code>label for=</code></label><input type="text" id="forInput"></input>
  </div>
  <div>
    <label for="forInput2" >A form element with multiple</label><label for="forInput2"><code>label for=</code></label><input type="text" id="forInput"></input>
  </div>
  <div>
    <span id="label1">Delete history after</span>
    <input type="number" id="numberfield" aria-labelledby="label1 numberfield label2">
    <span id="label2">days</span>
  </div>
  <div>Click on this link:
    <span tabindex="0" class="customlink"
      onclick="alert('activated!')" onkeydown="handlekey(event);" >Click</span>
  </div>
  <script>
function handlekey(event) {
 var target = event.target || event.srcElement;
 if (event.keyCode == 13) { target.onclick(); }
}
</script>
  <div id="subpage">
    <label for="forInput2">A form element with</label> <label for="forInput2">multiple <code>label for=</code> values</label>
    <input type="text" id="forInput2"></input>
  </div>
  <div>
    <span role="badariarole">A span with a non-existent ARIA role</span>
  </div>
  <div>
    <div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" id="deceptive">A button</div>
    <div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" role="button" id="deceptive-aria">An ARIA button</div>
    <img src="./images/button.png" id="deceptive-img"></img>
    <script>
      document.getElementById("deceptive").addEventListener("click", function() { alert("I'm not actually a button"); });
      document.getElementById("deceptive-aria").addEventListener("click", function() { alert("I'm not actually a button either, but I play one on screenreaders"); });
      document.getElementById("deceptive-img").addEventListener("click", function() { alert("I'm not a button either! Hahaha!"); });
    </script>
    <div>
      Buttons without <code>value</code> attribute:
      <button type="button" value="Hello" onclick="console.inspect(document.getElementById('forInput'));">Hello</button>
      <input type="button"></input>
      <input type="submit"></input>
    </div>
  </div>
  <label for="someInput">This tape will self destruct in <input type="range" min="0" max="10" value="5"> seconds.</label>
  <input type="button" id="someInput">
  <div>
    <img src="./images/chrome.png" title="chrome"/>
    <img src="./images/chrome.png" alt="" />
    <img src="./images/chrome.png" role="presentation" />
  <div style="color: #888">Low contrast text</div>
  <div style="color: #888; font-size: 18pt;">Large text</div>
  <div style="color: #999; font-size: 18pt;">Large low-contrast text</div>
  <div style="font-size: 10px;" id="absolute">Absolute sized text</div>
  <style>
    .bgimage {
      background-image:url(https://lh5.googleusercontent.com/-sCg4gG_WAnM/UNS3_JRkvVI/AAAAAAAAAyk/8OT1wOmSC30/s16-c-k/icon_11_document_list.png);
      display: inline-block;
      height:16px;
      width: 16px;
    }
    .bgImageNone {
      background-image: none;
    }
    .bigbgimage {
      background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/150px-Google_Chrome_icon_%282011%29.svg.png);
      height:150px;
      width: 150px;
    }
  </style>
  <span>
    A small image in the background (div): <div id="backgroundiconDiv" title="Drive Document" class="bgimage" ></div><br>
    A small image in the background (span): <span id="backgroundiconSpan" title="Drive Document" class="bgimage" ></span><br>
    A small image in the background with text content (will no be flagged): <span title="Drive Document" class="bgimage" >Text</span><br>
    A 'none' image in the background (will no be flagged): <span title="Drive Document" class="bgimageNone" ></span><br>
    A large image in the background (will not be flagged): <div title="Big image" class="bigbgimage" ></div>
  </span>
  <style>
    .absolute {
      font-size: 12px;
    }
  </style>
  <div class='absolute'>
    Absolute sized text from class
  </div>
<!--
  <video controls autobuffer id="videoTest" width="800px">
    <source src="videos/arduino.webm" type="video/webm" />
    <track kind="captions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Captions" default />
    <track kind="subtitles" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Subtitles" default />
    <track kind="descriptions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Descriptions" default />
    <track kind="chapters" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Chapters" default />
    This is the <span style="font-style: italic">fallback content</span>.
  </video>
  <video controls autobuffer id="videoTest" width="800px">
    <source src="videos/arduino.webm" type="video/webm" />
  </video>
-->
  <audio autoplay id="audioTest" src="005.ogg" type="audio/ogg; codecs=vorbis"></audio>
  <div id="ariahidden" aria-hidden="true" tabindex="0" style="height: 20px;">ARIA-hidden</div>
  <div id="notariahidden" tabindex="0">Not ARIA-hidden</div>
  <div id="overlapping" style="position: relative; top: -40px; height: 40px; background: rgba(255, 255, 255, 0.5);">Overlapping div</div>
  <div id="aria-invalid" role="textbox" aria-invalid="flurble">Eat my shorts</div>
  <div id="menu-label-test">Using the
    <div role="menu">
      <div role="menuitemcheckbox" aria-checked="true">Selected menu item</div>
      <div role="menuitemcheckbox" aria-checked="false">Not selected menu item</div>
    </div>
    in the computed label
  </div>
  <div role="textbox" aria-labelledby="menu-label-test"/>
  <div role="checkbox">Checkbox without aria-checked</div>
  <div>
    For Google,<a href="http://google.com/"> click here.</a>
  </div>

  <script>
    var results = axs.Audit.run();
    console.log(results);
    var message = axs.Audit.createReport(results);
    console.log(message);

    var auditConfig = new axs.AuditConfiguration();
    auditConfig.scope = document.querySelector('#subpage');
    results = axs.Audit.run(auditConfig);
    console.log(results);
    var message = axs.Audit.createReport(results);
    console.log(message);
  </script>

</body>
</html>
